<template>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <!-- 弹窗表单 -->
        <el-form :inline="false" :model="addForm" size="mini" class="demo-form-inline" label-width="120px"  ref="ruleForm">
            <el-form-item label="参数名称" prop="paramName">
                <el-input v-model="addForm.paramName" placeholder="请输入参数名称"  clearable></el-input>
            </el-form-item>

            <el-form-item label="参数值" prop="paramValue">
                <el-input v-model="addForm.paramValue" placeholder="请输入参数值"  clearable></el-input>
            </el-form-item>

            <el-form-item>
                <el-button @click="dialogVisible = false" style="padding: 10px 40px">取 消</el-button>
                <el-button type="primary" style="padding: 10px 40px" @click="addAndEditSubmit('ruleForm')">保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import API from '@/api';
import upload from '../../../components/upLoad';
import cloneDeep from 'lodash/cloneDeep';

export default {
    components: {
        upload
    },

    data() {
        return {
            //el-dialog 弹窗
            dialogTitle: '新增',
            dialogVisible: false,
            type: 1,
            appType: '',
            pageData: null,

            //表单
            addForm: {
                paramName: '',
                paramValue: ''
            }
        };
    },

    methods: {
        //- 弹窗关闭
        handleClose() {
            this.clearForm();
            this.dialogVisible = false;
        },

        //- 清空新增中的数据
        clearForm() {
            this.addForm = {};
        },

        //- 初始化
        init(item, pageData, appType) {
            this.dialogVisible = true;
            this.appType = appType;
            this.pageData = pageData;

            if (item) {
                this.type = 2; //编辑
                this.dialogTitle = '编辑';
                this.addForm = item;
            } else {
                this.type = 1; // 新增
                this.dialogTitle = '新增';
            }
        },

        //- 新增或编辑
        addAndEditSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = cloneDeep(this.addForm);
                    params.materialId = this.pageData.materialId;

                    var tick;

                    switch (this.appType) {
                        case '农产品管理-添加和编辑':
                            if (this.type == 1) {
                                tick = API.goodsManger.ncpAddParam(params);
                            } else {
                                tick = API.goodsManger.ncpUpdateParam(params);
                            }

                            break;

                        case '农资产品管理-添加和编辑':
                            if (this.type == 1) {
                                tick = API.goodsManger.nzAddParam(params);
                            } else {
                                tick = API.goodsManger.nzUpdateParam(params);
                            }

                            break;
                    }

                    tick.then((data) => {
                        if (data.code == '0000') {
                            this.$message({
                                message: `${this.type == 2 ? '修改成功' : '新增成功'}`,
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.clearForm();
                                
                                    this.dialogVisible = false;
                                    this.$emit('refreshDataList');
                                }
                            });
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
};
</script>

<style>
</style>